<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
 <cpn @itemclick="cpnclick"></cpn>
</div>
<template id="cpn">
  <div>
    <button v-for="item in category" @click="btnclick(item)">
      {{item.name}}
    </button>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template:`#cpn`,
    data(){
      return{
        category:[
          {id:'a',name: '热门推荐'},
          {id:'b',name: '冷门推荐'},
          {id:'c',name: '手机数码'},
          {id:'d',name: '家电电器'},
          {id:'e',name: '电脑办公'},
        ]
      }
    },
    methods:{
      btnclick(item){
        this.$emit('itemclick',item)
      }
    }
  }
  const app = new Vue({
    el:'#app',
    data:{
      message:'123',
      name:'321',
    },
    components:{
      cpn
    },
    methods: {
      cpnclick(item){
        console.log(item)
      }
    }

  })
</script>
</body>
</html>